<template>
  <div>
    <b-alert
      v-if="form.success" dismissible
      :show="showAlert" variant="success" @dismissed="showAlert=false"
    >充值成功</b-alert>
    <b-alert
      v-else dismissible
      :show="showAlert" variant="danger" @dismissed="showAlert=false"
    >充值失败</b-alert>
    <b-card class="luke-card">
      <h5 slot="header">充值</h5>
      <b-form @submit="onSubmit">
        <b-form-group label="ID：" horizontal>
          <b-form-input placeholder="ID" v-model="form.data.id" :disabled="form.disabled"></b-form-input>
        </b-form-group>
        <b-form-group label="金额增加：" horizontal>
          <b-form-input placeholder="金额增加" v-model="form.data.amount" :disabled="form.disabled"></b-form-input>
        </b-form-group>
        <b-form-row tag="b-row" align-h="end">
          <b-button type="submit" variant="primary" v-html="form.submit" :disabled="form.disabled"></b-button>
        </b-form-row>
      </b-form>
    </b-card>
  </div>
</template>

<script>
  import Config from '@/assets/global-config'
  import axios from 'axios'
  export default {
    name: 'Recharge',
    data () {
      return {
        form: {
          data: {
            id: '',
            amount: ''
          },
          submit: '确定',
          disabled: false,
          success: 'success'
        },
        showAlert: false
      }
    },
    methods: {
      onSubmit (event) {
        event.preventDefault()
        let that = this

        this.form.submit = '提交中...'
        this.form.disabled = true

        axios.post(Config.recharge_action(), JSON.stringify(this.form.data))
        .then(function (response) {
          console.log(response)
          that.form.submit = '确定'
          that.form.disabled = false
          if (response.status === 200 && response.data.rescode === 1) {
            that.form.success = true
            that.form.data.amount = 0
          } else {
            console.log(response)
            that.form.success = false
          }
          that.showAlert = true
        })
        .catch(function (error) {
          console.log(error)
          that.form.submit = '确定'
          that.form.disabled = false
          that.form.success = false
          that.showAlert = true
        })
      }
    }
  }
</script>
